<template>
<div class="tab-home-box" style="height:calc(100% - 2px);">
    <div class="tab-title">
      <el-button type="primary" size="mini" icon="el-icon-edit" style="float:right;">编辑</el-button>
      <i class="el-icon-s-home" style="color:#15428F;font-size:1.5em;vertical-align: top;"></i>我的快捷菜单
    </div>
    <div class="tab-content">
      <span class="router-link"><i class="el-icon-truck" style="color:#15428F;font-size:1.2em;"></i>车辆基本信息</span>
      <span class="router-link"><i class="el-icon-truck" style="color:#15428F;font-size:1.2em;"></i>驾驶员信息管理</span>
      <span class="router-link"><i class="el-icon-truck" style="color:#15428F;font-size:1.2em;"></i>车辆分队管理</span>
      <span class="router-link"><i class="el-icon-truck" style="color:#15428F;font-size:1.2em;"></i>车辆分配驾驶员</span>
      <span class="router-link"><i class="el-icon-truck" style="color:#15428F;font-size:1.2em;"></i>车辆新增申请</span>
      <span class="router-link"><i class="el-icon-truck" style="color:#15428F;font-size:1.2em;"></i>服务监督卡办理</span>
      <span class="router-link"><i class="el-icon-truck" style="color:#15428F;font-size:1.2em;"></i>车辆销户办理</span>
    </div>
    <el-row class="row-2-col">
      <el-col :span="12">
        <div style="margin-right:5px;" class="tab-box-border border-r">
          <div class="tab-title">
            <i class="el-icon-document" style="color:#15428F;font-size:1.5em;"></i>公司动态
          </div>
          <div class="tab-newslist"></div>
        </div>
        
      </el-col>
      <el-col :span="12">
        <div class="tab-box-border border-l">
          <div class="tab-title">
            <i class="el-icon-chat-dot-square" style="color:#15428F;font-size:1.5em;"></i>系统提醒信息
          </div>
          <div class="tab-newslist"></div>
        </div>
      </el-col>
    </el-row>
    <el-row class="row-2-col">
      <el-col :span="12">
        <div style="margin-right:5px;" class="tab-box-border border-r">
          <div class="tab-title">
            <i class="el-icon-document-copy" style="color:#15428F;font-size:1.5em;"></i>文件分发
          </div>
          <div class="tab-newslist"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="tab-box-border border-l">
          <div class="tab-title">
            <i class="el-icon-document-copy" style="color:#15428F;font-size:1.5em;"></i>管理处分发文件
          </div>
          <div class="tab-newslist"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import tinymce from '@/components/Editor'
export default {
  data(){
    return {
      form:{
        test:''
      }
    }
  },
  mounted(){
    
  },
  methods:{
    
  }

}
</script>
<style scoped lang="scss">
$Color:#15428F;
$Bgnavtab:rgba(255,255,255,.5);
$BgHeader:#DFE8F6;
$BorderColor:#99bbe8;
.common-navstyle{
  color: $Color;font-weight: bold;line-height: 30px;border-radius: 3px;padding: 0 8px; background: linear-gradient(to bottom ,#fff,#deecfd,#fff); background-color:$Bgnavtab;
}
.tab-home-box{
  border:1px solid $BorderColor;
  .tab-title{ line-height: 25px;background: linear-gradient(to bottom ,#deecfd,#c6d7ec);font-weight: bold;color: $Color;padding:5px;
    &>i{vertical-align: middle;margin-right:3px;}
  }
  
  .tab-content{padding:15px 20px;height:90px;
    .router-link{font-size: 16px;cursor: pointer;color: $Color; display: inline-block;min-width:150px;line-height:30px;height:30px;
      &:hover{text-decoration: underline;}
    }
  }
  .row-2-col{height:calc(50% - 78px);
    .el-col-12{height:100%;}
    .tab-box-border{height:100%;
      &.border-r{border-right:1px solid $BorderColor;}
      &.border-l{border-left:1px solid $BorderColor;}
      .tab-title{border-top:2px solid $BorderColor;border-bottom:2px solid $BorderColor;}
      .tab-newslist{background-color: #fff;height:calc(100% - 39px);}
    }
  }
  .nav-tab{
    border-bottom:1px solid $BorderColor;padding-bottom:1px;
    span{@extend .common-navstyle;background: linear-gradient(to bottom ,#deecfd,#e8ecf1);cursor: pointer;display:inline-block;font-size:14px;border-bottom-right-radius:0;border-bottom-left-radius:0;margin-left:6px;width:20%;min-width:200px;max-width:300px;border:1px solid $BorderColor;font-weight:normal;background-color:#d1e2f8;border-bottom:0;
      &:hover,&.active{background: linear-gradient(to bottom ,#fff,#deecfd,#fff);color: $Color;font-weight: bold;background-color:#e0edfd;border-bottom:none;}
      &.active{cursor: default;}
    }
  }
}
</style>